<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0px;padding: 0px;outline: none;}
        .box{width:1200px;height: auto;overflow: hidden;margin:20px auto;position: relative;}
        label img{width:38px;height:38px;float: left;}
        .box h1{font-size:28px;margin-bottom:20px;}
        .box h1 span{font-size: 16px;color: #999999;font-weight: normal;}
        textarea{width:1100px;height:110px;float: left;margin-left:20px;padding-top:10px;padding-left:10px;color:rgb(153,153,153);border:1px solid #e8e8e8;resize: none;border-radius: 5px;}
        textarea:hover{border:1px solid rgb(0,207,72)}
        button{width:68px;height:30px;background: #00be06;border-radius: 30px;line-height: 30px;font-size: 14px;color:#ffffff;cursor: pointer;transition:all 2s;position: absolute;bottom:10px;right:50px;border: none;}
        .box_con{width:1200px;height: auto;overflow: hidden;margin:auto;}
        .box_con h1{font-weight: normal;font-size: 20px;color:#222222;margin-bottom:20px;}
        .box_con h1 span{font-size: 16px;color: #999999;font-weight: normal;}
        .box_con dl{width:100%;height:auto;overflow: hidden;position: relative;border-bottom: 1px solid rgb(238,238,238);padding-bottom:25px;padding-top:25px;}
        .box_con dl dt{width:54px;height:54px;float: left;margin-right:10px;}
        .box_con dl dt img{width:54px;height:54px;float: left;border-radius: 50%;}
        .box_con dl dd{width:1120px;height:auto;overflow: hidden;}
        .box_con dl dd span{color:rgb(102,102,102);margin-bottom:5px;display: block;}
        .box_con dl dd p{line-height: 28px;}
        .box_con dl dd a{width:60px;height:30px;border-radius: 5px;text-align: center;line-height: 30px;color:#ffffff;background: rgb(0,207,72);display: block;position: absolute;right:20px;bottom:10px;text-decoration: none;cursor: pointer;}
    </style>
</head>
<body>
    <!--
        核心思路：
        1、点击按钮之后，就动态创建一个dl,添加到box_con里面
        2、创建dl的同时，把文本域里面的值通过其value赋值给p标签
        3、如果想要新的留言后面显示就用appendChild 
           如果想要前面显示就用insertBefore

    -->
    <div class="box">
        <h1>评论<span>（3902）</span></h1>
        <form action="#" method="POST">
            <label for=""><img src="image/header-userImg-default.png"/></label>
            <textarea name="" id="area" cols="30" rows="10" placeholder="来说两句吧~"></textarea>
            <button type="button">发布</button>
        </form>
    </div>
    <div class="box_con">
        <h1>精彩评论<span>（49）</span></h1>
        <!-- <dl>
            <dt><img src="image/passport_990839507_157845410164395_130_130.jpg"/></dt>
            <dd><span>珂Jessica</span><p>测试内容</p><a href='javascript:void(0)'>删除</a></dd>
        </dl> -->
    </div>
    <script>
        //1、找到button按钮
        var btn = document.getElementsByTagName("button")[0];
        var area = document.getElementById("area");
        var box_con = document.getElementsByClassName("box_con")[0];
        //2、发生事件
        btn.onclick = function(){
            //3、获取多行文本框的值
            var area_value = area.value;
            if(area_value==""){
                alert("请输入内容");
            }else{
                //4、创建标签节点对象
                var dl = document.createElement("dl");
                var dt = document.createElement("dt");
                var dd = document.createElement("dd");
                dl.appendChild(dt);
                dl.appendChild(dd);
                //如果标签里面只有纯文本 
                //先创建一个文本节点，然后在给标签节点来追加
                // var text = document.createTextNode("<b>hello</b>"); //innerText
                // dt.appendChild(text);
                // dl.appendChild(dt);
                // box_con.appendChild(dl);
                // console.log(dl);

                //如果标签里面有子标签，值一定是innerHTML
                dt.innerHTML = "<img src=\"image/passport_990839507_157845410164395_130_130.jpg\"/>";
                dd.innerHTML = "<span>珂Jessica</span><p>"+area_value+"</p><a href='javascript:void(0)'>删除</a>";
                dl.appendChild(dt);
                dl.appendChild(dd);
                box_con.appendChild(dl);

                //清空多行文本框的值
                area.value = "";

                //获取a标签
                var a = document.getElementsByTagName("a");
                //循环找到a标签
                for(var i = 0 ; i < a.length;i++){
                    // console.log(a[i]);
                    //发生事件
                    a[i].onclick = function(){
                        //删除：自删除，通过父节点删除
                        // console.log(this.parentNode.parentNode); // dl
                        // this.parentNode.parentNode.remove();
                        //通过父节点删除??
                        box_con.removeChild(this.parentNode.parentNode);
                    }
                }
            }
        }
    </script>
</body>
</html>